<?php ob_start() ?>

<body class="bg-neutral min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-6xl"> <!-- 将 max-w-4xl 改为 max-w-6xl 以扩大横向宽度 -->
        <header class="text-center mb-10">
            <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-primary mb-3">研学基地基本信息表</h1>
        </header>

        <!-- 研学地点简介 -->
        <section class="grid grid-cols-3 gap-4"> <!-- 直接设置为三列布局 -->
            <?php 
            $count = 0;
            foreach($studyLocations as $location):
                if ($count >= 12) break; // 只显示前 9 个，确保总共三行
            ?>
            <div class="study-location-card bg-white rounded-xl shadow-lg p-6">
                <h3 class="font-bold text-lg mb-2 text-secondary"><?= $location['location_order']?>号 <?= $location['name']?></h3>

                <p class="text-gray-600"><strong>线路特色：</strong> <?= $location['description']?></p>
                <?php if (!empty($location['pic'])):?>
                <!-- 设置图片的宽度和高度，并使用 object-fit 属性 -->
                <img src="<?= base_url($location['pic'])?>" alt="<?= $location['name']?>" class="mt-2 rounded-md" style="width: 300px; height: 200px; object-fit: cover;">
                <?php endif;?>
                <p class="text-gray-600 mt-2"><strong>车程:</strong> 约<?= $location['distance']?>分钟</p>
            </div>
            <?php 
                $count++;
            endforeach;
            ?>
        </section>

<?php $content = ob_get_clean() ?>

<?= view('layouts/base', ['content' => $content]) ?>